<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title> float+margin实现三列布局 </title>

    <style>
        .left {
            width: 200px;
            background-color: red;
            float: left;
        }

        .right {
            width: 300px;
            background-color: yellow;
            float: right;
        }

        .main {
            margin-left: 200px;
            margin-right: 300px;
            background-color: blue;
        }

        .left,
        .right,
        .main {
            height: 300px;
        }
    </style>
</head>
<!-- 分析 -->
<!-- https://blog.csdn.net/yin_991/article/details/86672831 -->

<body>
    <div class="left">左盒子</div>
    <div class="right">右盒子</div>
    <div class="main">中间盒子</div>
</body>

</html>